<template>
  <div class="visit-dashboard">
    <el-card :body-style="{ padding: '20px' }">
      <template #header>
        <div class="card-header">
          <span>走访工作台</span>
        </div>
      </template>

      <!-- 统计卡片区域 -->
      <div class="form-section">
        <h3 class="section-title">关键指标概览</h3>
        <div class="stats-cards">
          <div class="info-grid">
            <div class="stat-card">
              <div class="stat-content">
                <div class="stat-icon">
                  <el-icon class="icon-large"><Check /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ targetCompletionCount }}</div>
                  <div class="stat-label">走访目标完成数</div>
                </div>
                <div class="stat-change">
                  <span class="increase">↑ 12%</span>
                </div>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-content">
                <div class="stat-icon">
                  <el-icon class="icon-large"><ccircleCheck /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ planCompletionCount }}</div>
                  <div class="stat-label">走访计划完成数</div>
                </div>
                <div class="stat-change">
                  <span class="increase">↑ 8%</span>
                </div>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-content">
                <div class="stat-icon">
                  <el-icon class="icon-large"><User /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ customerVisitCount }}</div>
                  <div class="stat-label">走访客户数</div>
                </div>
                <div class="stat-change">
                  <span class="increase">↑ 5%</span>
                </div>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-content">
                <div class="stat-icon">
                  <el-icon class="icon-large"><Calendar /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ todayPlansCount }}</div>
                  <div class="stat-label">今日计划</div>
                </div>
                <div class="stat-change">
                  <span class="normal">今日</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 主内容区域 -->
      <div class="main-content">
        <!-- 左侧：日历视图 -->
        <div class="form-section calendar-section">
          <h3 class="section-title">走访日历</h3>
          <div class="calendar-container">
            <el-calendar v-model="currentDate" locale="zh-cn">
              <template #dateCell="{ data }">
                <div class="calendar-date">
                  <div>{{ data.day }}</div>
                  <div
                    v-if="getPlanStatus(data.day) === 'planned'"
                    class="plan-indicator planned"
                  ></div>
                  <div
                    v-else-if="getPlanStatus(data.day) === 'overdue'"
                    class="plan-indicator overdue"
                  ></div>
                  <div
                    v-else-if="getPlanStatus(data.day) === 'completed'"
                    class="plan-indicator completed"
                  ></div>
                </div>
              </template>
            </el-calendar>
            <!-- 日历图例 -->
            <div class="calendar-legend">
              <span><span class="legend-dot planned"></span> 有走访计划</span>
              <span><span class="legend-dot overdue"></span> 走访逾期</span>
              <span><span class="legend-dot completed"></span> 走访完成</span>
            </div>
          </div>
        </div>

        <!-- 右侧：近期代办和统计图表 -->
        <div class="right-panel">
          <!-- 近期代办 -->
          <div class="form-section">
            <div class="section-header">
              <h3 class="section-title">近期待办</h3>
              <el-button type="text" size="small">查看全部</el-button>
            </div>
            <div class="todo-list">
              <div v-for="todo in recentTodos" :key="todo.id" class="todo-item">
                <div class="todo-checkbox">
                  <el-checkbox v-model="todo.completed"></el-checkbox>
                </div>
                <div class="todo-content">
                  <div class="todo-title">{{ todo.title }}</div>
                  <div class="todo-meta">
                    <span class="todo-customer">{{ todo.customer }}</span>
                    <span class="todo-time">{{ todo.time }}</span>
                  </div>
                </div>
                <div class="todo-priority" :class="todo.priority">
                  {{ todo.priorityText }}
                </div>
              </div>
            </div>
          </div>

          <!-- 走访目标完成趋势图 -->
          <div class="form-section">
            <h3 class="section-title">走访目标完成趋势</h3>
            <div class="chart-container">
              <el-empty
                v-if="!chartData.length"
                description="暂无数据"
              ></el-empty>
              <div v-else ref="trendChart" class="trend-chart"></div>
            </div>
          </div>

          <!-- 走访客户分布图 -->
          <div class="form-section">
            <h3 class="section-title">走访客户分布</h3>
            <div class="chart-container">
              <el-empty
                v-if="!distributionData.length"
                description="暂无数据"
              ></el-empty>
              <div
                v-else
                ref="distributionChart"
                class="distribution-chart"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Check, User, Calendar } from "@element-plus/icons-vue";

// 定义类型接口
interface TodoItem {
  id: number;
  title: string;
  customer: string;
  time: string;
  priority: "high" | "medium" | "low";
  priorityText: string;
  completed: boolean;
}

interface ChartDataItem {
  name: string;
  value: number;
}

// 状态
const currentDate = ref(new Date());
const trendChart = ref<HTMLDivElement | null>(null);
const distributionChart = ref<HTMLDivElement | null>(null);

// 统计数据（从store计算得出或使用模拟数据）
const targetCompletionCount = ref(156);
const planCompletionCount = ref(42);
const customerVisitCount = ref(78);
const todayPlansCount = ref(5);

// 近期代办数据
const recentTodos = ref<TodoItem[]>([
  {
    id: 1,
    title: "与张三讨论新产品方案",
    customer: "张三科技有限公司",
    time: "今天 10:00",
    priority: "high",
    priorityText: "高",
    completed: false,
  },
  {
    id: 2,
    title: "提交走访报告",
    customer: "李四贸易公司",
    time: "今天 15:30",
    priority: "medium",
    priorityText: "中",
    completed: false,
  },
  {
    id: 3,
    title: "准备下周走访材料",
    customer: "王五制造企业",
    time: "明天 09:00",
    priority: "medium",
    priorityText: "中",
    completed: false,
  },
  {
    id: 4,
    title: "跟进项目进度",
    customer: "赵六工程公司",
    time: "明天 14:00",
    priority: "low",
    priorityText: "低",
    completed: false,
  },
]);

// 有计划的日期 - 均匀分布在当月不同周
const plannedDates = ref([2, 7, 14, 19, 26, 29, 30]);
// 逾期的日期 - 分布在月初和月中
const overdueDates = ref([1, 5, 10, 15]);
// 已完成的日期 - 分布在整月，与其他状态错开
const completedDates = ref([3, 8, 12, 20, 22, 25]);

// 图表数据
const chartData = ref<ChartDataItem[]>([
  { name: "1月", value: 12 },
  { name: "2月", value: 19 },
  { name: "3月", value: 15 },
  { name: "4月", value: 25 },
  { name: "5月", value: 30 },
  { name: "6月", value: 28 },
]);

const distributionData = ref<ChartDataItem[]>([
  { name: "华东区", value: 35 },
  { name: "华南区", value: 25 },
  { name: "华北区", value: 20 },
  { name: "华西区", value: 15 },
  { name: "其他", value: 5 },
]);

// 初始化图表
const initCharts = () => {
  // 在实际项目中，这里会使用 ECharts 或其他图表库初始化图表
  // 为了演示，我们先跳过实际的图表初始化
  console.log("图表初始化", chartData.value, distributionData.value);
};

// 获取日期的走访计划状态
const getPlanStatus = (
  day: number
): "overdue" | "completed" | "planned" | "none" => {
  if (overdueDates.value.includes(day)) {
    return "overdue"; // 逾期
  } else if (completedDates.value.includes(day)) {
    return "completed"; // 已完成
  } else if (plannedDates.value.includes(day)) {
    return "planned"; // 有计划
  }
  return "none"; // 无计划
};

// 组件挂载时
onMounted(() => {
  // 初始化图表
  initCharts();
});
</script>

<style scoped>
.visit-dashboard {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

/* 表单区块样式 */
.form-section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

/* 区块标题样式 */
.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
}

/* 区块头部样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* 信息网格布局 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 0 -8px;
  padding: 0 8px;
}

/* 统计卡片样式 */
.stat-card {
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 16px;
  height: 100%;
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #ecf5ff;
  color: #409eff;
}

.icon-large {
  font-size: 24px;
}

.stat-info {
  flex: 1;
  margin-left: 15px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

.stat-change .increase {
  color: #67c23a;
}

.stat-change .normal {
  color: #409eff;
}

/* 主内容区域布局 */
.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 日历区域样式 */
.calendar-section {
  grid-row: span 3;
}

.calendar-container {
  padding: 10px 0;
}

.calendar-date {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 不同状态的计划指示器样式 */
.plan-indicator {
  position: absolute;
  bottom: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.plan-indicator.planned {
  background-color: #409eff;
}

.plan-indicator.overdue {
  background-color: #f56c6c;
}

.plan-indicator.completed {
  background-color: #67c23a;
}

.calendar-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  font-size: 14px;
  color: #909399;
  flex-wrap: wrap;
  gap: 15px;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.legend-dot.planned {
  background-color: #409eff;
}

.legend-dot.overdue {
  background-color: #f56c6c;
}

.legend-dot.completed {
  background-color: #67c23a;
}

/* 右侧面板布局 */
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 代办事项列表样式 */
.todo-list {
  max-height: 300px;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 16px;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-checkbox {
  margin-right: 12px;
}

.todo-content {
  flex: 1;
}

.todo-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.todo-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.todo-customer {
  margin-right: 15px;
}

.todo-priority {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.todo-priority.high {
  background-color: #fef0f0;
  color: #f56c6c;
}

.todo-priority.medium {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.todo-priority.low {
  background-color: #f0f9ff;
  color: #66b1ff;
}

/* 图表容器样式 */
.chart-container {
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 16px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trend-chart,
.distribution-chart {
  width: 100%;
  height: 100%;
  min-height: 200px;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 1fr;
  }

  .calendar-section {
    grid-row: auto;
  }
}
</style>
